<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退款申请流程测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .section h3 {
            margin-top: 0;
            color: #333;
        }
        button {
            background-color: #1890ff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #40a9ff;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #1890ff;
        }
        .error {
            border-left-color: #dc3545;
            background-color: #f8d7da;
        }
        .success {
            border-left-color: #28a745;
            background-color: #d4edda;
        }
        .info {
            border-left-color: #17a2b8;
            background-color: #d1ecf1;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        .status-processed {
            background-color: #d4edda;
            color: #155724;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        .status-rejected {
            background-color: #f8d7da;
            color: #721c24;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        .action-link {
            color: #1890ff;
            text-decoration: none;
            cursor: pointer;
        }
        .action-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>退款申请流程测试</h1>
        
        <!-- 步骤1：获取退款申请列表 -->
        <div class="section">
            <h3>步骤1：获取退款申请列表</h3>
            <button onclick="getRefundList()">获取退款申请列表</button>
            <div id="listResult" class="result" style="display: none;"></div>
        </div>
        
        <!-- 步骤2：查看退款详情 -->
        <div class="section">
            <h3>步骤2：查看退款详情</h3>
            <div id="detailResult" class="result" style="display: none;"></div>
        </div>
        
        <!-- 步骤3：处理退款申请 -->
        <div class="section">
            <h3>步骤3：处理退款申请</h3>
            <div id="processResult" class="result" style="display: none;"></div>
        </div>
    </div>

    <script>
        let currentRefundId = null;
        let currentRefundStatus = null;

        // 获取退款申请列表
        async function getRefundList() {
            const resultDiv = document.getElementById('listResult');
            resultDiv.style.display = 'block';
            resultDiv.className = 'result info';
            resultDiv.innerHTML = '正在获取退款申请列表...';
            
            try {
                const response = await fetch('http://localhost:5242/api/RefundApplication/list?PageIndex=1&PageSize=10');
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    displayRefundList(data.data);
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `<strong>获取失败：</strong>${data.msg}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `<strong>请求错误：</strong>${error.message}`;
            }
        }

        // 显示退款申请列表
        function displayRefundList(data) {
            const resultDiv = document.getElementById('listResult');
            
            let html = `
                <h4>退款申请列表</h4>
                <p><strong>总记录数：</strong>${data.totalCount}</p>
                <p><strong>总页数：</strong>${data.totalPages}</p>
            `;
            
            if (data.items && data.items.length > 0) {
                html += `
                    <table>
                        <thead>
                            <tr>
                                <th>申请编号</th>
                                <th>申请时间</th>
                                <th>用户手机号</th>
                                <th>退款金额</th>
                                <th>来源</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                data.items.forEach(item => {
                    const statusClass = getStatusClass(item.status);
                    const applyTime = item.applyTime ? new Date(item.applyTime).toLocaleString('zh-CN') : '-';
                    
                    html += `
                        <tr>
                            <td>${item.applicationNo || '-'}</td>
                            <td>${applyTime}</td>
                            <td>${item.userPhone || '-'}</td>
                            <td>¥${item.amount || 0}</td>
                            <td>${item.source || '-'}</td>
                            <td><span class="${statusClass}">${item.statusText || '未知'}</span></td>
                            <td>
                                <a class="action-link" onclick="viewRefundDetail(${item.id})">查看详情</a>
                            </td>
                        </tr>
                    `;
                });
                
                html += '</tbody></table>';
            } else {
                html += '<p>暂无数据</p>';
            }
            
            resultDiv.innerHTML = html;
        }

        // 查看退款详情
        async function viewRefundDetail(refundId) {
            currentRefundId = refundId;
            
            const resultDiv = document.getElementById('detailResult');
            resultDiv.style.display = 'block';
            resultDiv.className = 'result info';
            resultDiv.innerHTML = '正在获取退款详情...';
            
            try {
                const response = await fetch(`http://localhost:5242/api/RefundApplication/detail/${refundId}`);
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    displayRefundDetail(data.data);
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `<strong>获取详情失败：</strong>${data.msg}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `<strong>请求错误：</strong>${error.message}`;
            }
        }

        // 显示退款详情
        function displayRefundDetail(data) {
            const resultDiv = document.getElementById('detailResult');
            currentRefundStatus = data.status;
            
            const processTime = data.processTime ? new Date(data.processTime).toLocaleString('zh-CN') : '-';
            const applyTime = data.applyTime ? new Date(data.applyTime).toLocaleString('zh-CN') : '-';
            
            let html = `
                <h4>退款申请详情</h4>
                <p><strong>申请编号：</strong>${data.applicationNo || '-'}</p>
                <p><strong>申请时间：</strong>${applyTime}</p>
                <p><strong>用户手机号：</strong>${data.userPhone || '-'}</p>
                <p><strong>退款金额：</strong>¥${data.amount || 0}</p>
                <p><strong>状态：</strong><span class="${getStatusClass(data.status)}">${data.statusText || '未知'}</span></p>
                <p><strong>处理时间：</strong>${processTime}</p>
                <p><strong>备注：</strong>${data.remark || '无'}</p>
            `;
            
            // 如果是待处理状态，显示处理按钮
            if (data.status === 0) {
                html += `
                    <div style="margin-top: 15px;">
                        <button onclick="confirmRefund()">确认退款</button>
                        <button onclick="rejectRefund()" style="background-color: #dc3545;">拒绝退款</button>
                    </div>
                `;
            }
            
            resultDiv.innerHTML = html;
        }

        // 确认退款
        async function confirmRefund() {
            if (!currentRefundId) {
                alert('请先选择退款申请');
                return;
            }
            
            if (!confirm('确定要确认退款吗？')) {
                return;
            }
            
            const resultDiv = document.getElementById('processResult');
            resultDiv.style.display = 'block';
            resultDiv.className = 'result info';
            resultDiv.innerHTML = '正在确认退款...';
            
            try {
                const response = await fetch('http://localhost:5242/api/RefundApplicationWrite/confirm', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: currentRefundId,
                        remark: '测试确认退款',
                        operatorId: 1
                    })
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = '<strong>确认退款成功！</strong><br>状态已更新为"已处理"';
                    
                    // 重新获取详情
                    setTimeout(() => {
                        viewRefundDetail(currentRefundId);
                    }, 1000);
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `<strong>确认退款失败：</strong>${data.msg}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `<strong>请求错误：</strong>${error.message}`;
            }
        }

        // 拒绝退款
        async function rejectRefund() {
            if (!currentRefundId) {
                alert('请先选择退款申请');
                return;
            }
            
            if (!confirm('确定要拒绝退款吗？')) {
                return;
            }
            
            const resultDiv = document.getElementById('processResult');
            resultDiv.style.display = 'block';
            resultDiv.className = 'result info';
            resultDiv.innerHTML = '正在拒绝退款...';
            
            try {
                const response = await fetch('http://localhost:5242/api/RefundApplicationWrite/reject', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: currentRefundId,
                        remark: '测试拒绝退款',
                        operatorId: 1
                    })
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = '<strong>拒绝退款成功！</strong><br>状态已更新为"已拒绝"';
                    
                    // 重新获取详情
                    setTimeout(() => {
                        viewRefundDetail(currentRefundId);
                    }, 1000);
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `<strong>拒绝退款失败：</strong>${data.msg}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `<strong>请求错误：</strong>${error.message}`;
            }
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case 0: return 'status-pending';
                case 1: return 'status-processed';
                case 2: return 'status-rejected';
                default: return 'status-pending';
            }
        }
    </script>
</body>
</html> 